{% extends "base.html" %}
{% block body %}
{% import "macros.html" as macros %}

<div class="single-page">
    <div class="single-page-artical">
        <ol class="breadcrumb">
            {% if source_dict['label'] != 'Home' %}
            <li><a href="{{ url_for('pic.home') }}">Home</a></li>
            {% endif %}
            {% if source_dict %}
            <li><a href="{{ source_dict['url'] }}">{{ source_dict['label'] }}</a></li>
            {% endif %}
            <li class="active">{{ pic.id }}</li>
        </ol>
        <div class="artical-content">
            <a href="{{url_for('static',filename=pic.url())}}" target="_blank"><img src="{{url_for('static',filename=pic.url())}}"></a>
            <center>
                {{ macros.pic_rate(pic) }}

                {% if prev_pic or next_pic %}
                <ul class="pager archive-link">
                    {% if prev_pic %}
                    <li><a href="{{url_for('pic.one_pic',uid=prev_pic.id)}}?{{url_query}}">Previous</a></li>
                    {% else %}<li class="disabled"><a>Previous</a></li>
                    {% endif %}
                    {% if next_pic %}
                    <li><a href="{{url_for('pic.one_pic',uid=next_pic.id)}}?{{url_query}}">Next</a></li>
                    {% else %}<li class="disabled"><a>Next</a></li>
                    {% endif %}
                </ul>
                {% endif %}
            </center>
            <!--<h3><a href="#">incididunt ut labore et dolore magna aliqua.</a></h3>-->
        </div>

        <div class="picture-basic-info">
            <div class="row">
                <i class="fa fa-pencil-square-o"></i> <span id="pic-note">{{pic.note | default('',true)}}</span>
            </div>

            <div class="row" id="albums_info">
                <p>
                    <i class="fa fa-newspaper-o"></i>&nbsp;{% for album in pic.albums %}&nbsp;<a href="{{url_for('pic.one_album',uid=album.id)}}">{{album.name}}</a>&nbsp;{%endfor%}&nbsp;<input type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#modal" value=" + ">
                </p>
                <p>
                    <i class="fa fa-tags"></i>&nbsp;{% for tag in pic.tags %}&nbsp;<a href="{{url_for('pic.one_tag',uid=tag.id)}}">{{tag.name}}</a>&nbsp;{%endfor%}&nbsp;<input type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#modal" value=" + ">
                </p>
            </div>

            <div class="row">
                <i class="fa fa-info-circle"></i>
                    分辨率:{{pic.resolution_hr()}},
                    文件大小: {{pic.file_size_hr()}},
                    导入时间: {{pic.create_time}},
                    查看次数: {{pic.pv}}

            </div>

        </div>

        <div class="picturl-action">
            <div class="row">
                <input type="button" class="btn btn-sm btn-danger" value="删除" onclick="onDelete_dbrecord('{{pic.id}}');">
            </div>
        </div>



    </div>

        <!--
        <div class="artical-links">
            <ul>
                <li><a href="#"><img src="images/blog-icon2.png" title="Admin"><span>admin</span></a></li>
                <li><a href="#"><img src="images/blog-icon3.png" title="Comments"><span>No comments</span></a></li>
                <li><a href="#"><img src="images/blog-icon4.png" title="Lables"><span>View posts</span></a></li>
            </ul>
        </div>
        <div class="share-artical">
            <ul>
                <li><a href="#"><img src="images/facebooks.png" title="facebook">Facebook</a></li>
                <li><a href="#"><img src="images/twiter.png" title="Twitter">Twiiter</a></li>
                <li><a href="#"><img src="images/google+.png" title="google+">Google+</a></li>
                <li><a href="#"><img src="images/rss.png" title="rss">Rss</a></li>
            </ul>
        </div>
        <div class="clear"> </div>
    </div>

    <!---start-comments-section--->
    <!--
    <div class="comment-section">
        <div class="grids_of_2">
            <h2>Comments</h2>
            <div class="grid1_of_2">
                <div class="grid_img">
                    <a href=""><img src="images/pic10.jpg" alt=""></a>
                </div>
                <div class="grid_text">
                    <h4 class="style1 list"><a href="#">Uku Mason</a></h4>
                    <h3 class="style">march 2, 2013 - 12.50 AM</h3>
                    <p class="para top"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                    <a href="" class="btn1">Click to Reply</a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="grid1_of_2 left">
                <div class="grid_img">
                    <a href=""><img src="images/pic10.jpg" alt=""></a>
                </div>
                <div class="grid_text">
                    <h4 class="style1 list"><a href="#">Designer First</a></h4>
                    <h3 class="style">march 3, 2013 - 4.00 PM</h3>
                    <p class="para top"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                    <a href="" class="btn1">Click to Reply</a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="grid1_of_2">
                <div class="grid_img">
                    <a href=""><img src="images/pic12.jpg" alt=""></a>
                </div>
                <div class="grid_text">
                    <h4 class="style1 list"><a href="#">Ro Kanth</a></h4>
                    <h3 class="style">march 2, 2013 - 12.50 AM</h3>
                    <p class="para top"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                    <a href="" class="btn1">Click to Reply</a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="artical-commentbox">
                <h2>Leave a Comment</h2>
                <div class="table-form">
                    <form action="#" method="post" name="post_comment">
                        <div>
                            <label>Name<span>*</span></label>
                            <input type="text" value=" ">
                        </div>
                        <div>
                            <label>Email<span>*</span></label>
                            <input type="text" value=" ">
                        </div>
                        <div>
                            <label>Your Comment<span>*</span></label>
                            <textarea> </textarea>
                        </div>
                    </form>
                    <input type="submit" value="submit">

                </div>
                <div class="clear"> </div>
            </div>
        </div>
    </div>
    -->
    <!---//End-comments-section--->

        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <span class="pull-right" style="color:#cbcbcb">
                            <input type="button" class="btn btn-primary btn-md pic_modal_submit" value="提交"/> | <button type="button" class="btn btn-default btn-md" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">取消</span></button>
                        </span>
                        <h4 class="modal-title" id="exampleModalLabel">编辑相册/标签信息</h4>
                    </div>

                    <div class="modal-body row">
                        <div class="col-xs-12 col-sm-6">
                            <h5>标签</h5>
                            <div class="row">
                                <div class="col-xs-9 col-sm-9">
                                    <input type="text" class="form-control input-sm" id="create_tag">
                                </div>
                                <div class="col-xs-3 col-sm-3">
                                    <input type="button" class="btn btn-success btn-sm" id="create_tag_btn" value="添加">
                                </div>
                            </div>
                            <div class="row">
                                {% for tag in siteinfo.all_tags() %}
                                <div class="col-xs-4 col-sm-6">
                                    <div class="form-group">
                                        <label class="checkbox-inline"><input type="checkbox" {% if tag.name in pic.tags_name() %}checked{% endif %} class="pic_info_chk" name="tag_chk" value="tag-{{tag.name}}">{{tag.name}}</label>
                                    </div>
                                </div>
                                {% endfor %}
                                <div class="col-xs-4 col-sm-6">
                                    <div class="form-group" id="new_tag"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-6">
                            <h5>相册</h5>
                            <div class="row">
                                <div class="col-xs-9 col-sm-9">
                                    <input type="text" class="form-control input-sm" id="create_album">
                                </div>
                                <div class="col-xs-3 col-sm-3">
                                    <input type="button" class="btn btn-success btn-sm" id="create_album_btn" value="添加">
                                </div>
                            </div>
                            <div class="row">
                                {% for album in siteinfo.all_albums() %}
                                <div class="col-xs-6 col-sm-12">
                                    <div class="form-group">
                                        <label class="checkbox-inline"><input type="checkbox" {% if album.name in pic.albums_name() %}checked{% endif %} class="pic_info_chk" name="album_chk" value="album-{{album.name}}">{{album.name}}</label>
                                    </div>
                                </div>
                                {% endfor %}
                                </div>
                            <div class="col-xs-6 col-sm-12">
                                <div class="form-group" id="new_album"></div>
                            </div>
                        </div>

                    </div><!-- modal-body end -->

                    <div class="modal-footer">
                        <input type="button" class="btn btn-primary btn-md pic_modal_submit" value="提交"/> |<button type="button" class="btn btn-default btn-md" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">取消</span></button>
                    </div>
                </div> <!-- modal-content end -->
            </div>
        </div><!-- modal end -->

</div>
{% endblock %}

{% block script %}
<script type="text/javascript">

function onDelete_dbrecord(pic_id) {
    var msg = "确定删除该图片吗？";
    if (confirm(msg)==true){

        $.ajax({
            url: "{{url_for('api.delete',label='pic')}}",
            type: 'GET',
            async:false,
            data: 'id=' + pic_id,
            dataType:"json",
            success: function (result) {
                alert(result['info']);
                window.history.back(-1);
                }
        });
    } else {}
}

$(function(){
    $('#pic-note').click(function(){
        var td=$(this); //为后面文本框变成文本铺垫
        var text=$(this).text();
        var input=$('<input type="text" class="form-control input-sm" value="'+text+'">');
        $(this).html( input );

        $('#pic-note').click(function(){ return false; }); //阻止表单默认点击行为

        $('#pic-note input').select(); //点击自动全选中表单的内容

        $('#pic-note input').blur(function(){
            var nextxt=$(this).val();
            if (nextxt != '' && nextxt !='{{pic.note}}' ) {
                td.html(nextxt);
                $.ajax({
                    type: "POST",
                    url:"{{url_for('api.note')}}",
                    dataType: "json",
                    contentType: "application/json",
                    data:JSON.stringify({"id":"{{pic.id}}","note":nextxt}),
                    success: function (result){
                        if (result['status'] == 0){alert(result['info'])} //报错才弹框
                    }
                })
            } else {
                td.html("{{pic.note}}") // 当input值为空时，失去焦点需要显示原始内容
            }

        }); //表单失去焦点文本框变成文本

    });
})

$('.pic_modal_submit').click(function () {
    var data =[];//定义一个数组
    $("#modal input[type='checkbox']:checked").each(function(){ data.push($(this).val()) });
    $.ajax({
        url: "{{url_for('api.pic_album_tag_update')}}",
        type: "POST",
        async:false,
        contentType: "application/json",
        dataType:"json",
        data: JSON.stringify({'pic_id':'{{pic.id}}','data':data}),
        success: function(result) {
            if (result['status'] == 1){
                $('#albums_info').html(result['response'])
                $('#modal').modal('hide')
            }
            else{alert(result['info']) }
        }
    })
})

$('#create_album_btn').click(function () {
    var text = $('#create_album').val()
    if (text != '' && text != ' ') {
        $("#new_album").html('<label class="checkbox-inline"><input type="checkbox" checked class="pic_info_chk" name="album_chk" value="album-' + text +'">'+ text + '</label>');
    }
})
$('#create_tag_btn').click(function () {
    var text = $('#create_tag').val()
    if (text != '' && text != ' ') {
        $("#new_tag").html('<label class="checkbox-inline"><input type="checkbox" checked class="pic_info_chk" name="tag_chk" value="tag-' + text +'">'+ text + '</label>');
    }
})

</script>
{% endblock %}